<template>
	<view class="sums">
		<!-- <u-status-bar style="background-color: #ffffff;"></u-status-bar> -->
		<view class="headw"></view>
		<view class="top" style="">
			<view v-show="xxFn == 0" style="width: 15%;padding-left: 5%;" @click="search(0)">
				<u-icon name="../../static/tabsIcon/searchtop.png" size="25" color="rgba(153, 153, 153, 1)"
					style="margin-top: 6upx;"></u-icon>
			</view>
			<view v-show="xxFn == 1" style="width: 15%;padding-left: 5%;" @click="search(1)">
				<u-icon name="../../static/tabsIcon/searchtop.png" size="25" color="rgba(153, 153, 153, 1)"
					style="margin-top: 6upx;"></u-icon>
			</view>
			<view class="title" style="">
				
			</view>
			<view style="width: 15%;" @click="release()">
				<u-icon name="../../static/tabsIcon/addico.png" size="25" color="rgba(153, 153, 153, 1)"
					style="margin-top: 6upx;"></u-icon>
			</view>
		</view>
		<view class="center">
			<view class="tab">
				<view class="btn" @click="xxFn = 0" :class="xxFn == 0 ? 'qie' : ''">圈子</view>
				<view class="btn" @click="xxFn = 1" :class="xxFn == 1 ? 'qie' : ''">推荐</view>
			</view>
		</view>
		<view class="mains">
			<xx ref='xx' v-if="xxFn == 0" :searchs="text0"></xx>
			<xx1 ref='xx1' v-if="xxFn == 1" :searchs1="text1"></xx1>
		</view>
	</view>
</template>

<script>
	import xx from './circle.vue';
	import xx1 from './bbs.vue';
	export default {
		data() {
			return {
				LinkType: 'switchTab',
				xxFn: 0,
				text: null,
				text0: '',
				text1: '',
				show: true
			};
		},
		components: {
			xx,
			xx1
		},
		onShow() {
			// setTimeout(()
			// this.show = false
			// // setTimeout(() => {
			// let this_ = this;
			
			if (this.xxFn == 0) {
				this.$nextTick(function() {
					// this.text0= '';
					// this.text1= '';
					// console.log(this.text1)
					this.$refs.xx.overload();
				})
			}
			// // }, 50)
		},
		onLoad(data) {
			if (data.type != null) {
				this.xxFn = data.type;
				if (this.xxFn == 0) {
					this.text0 = data.text;
				} else {
					this.text1 = data.text;
				}

			}

		},
		mounted() {
			// this.text = null;
		},
		onReachBottom() {
			if (this.xxFn == 0) {
				this.$refs.xx.addmodle();
			} else {
				this.$refs.xx1.circlelist();
			}
		},
		methods: {
			search(type) {
				uni.navigateTo({
					url: '/pages/community/search?typess=' + type,
				});
			},
			release() {
				uni.navigateTo({
					url: '/pages/community/release',
				});
			}
		}
	};
</script>
<style>
	page {
		/* background-color: #6667AB; */
		background-color: #E1E1E1;
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color: transparent;
	}

	.headw {
		height: 90upx;
		z-index: 10;
		display: flex;
		position: fixed;
		top: 0;
		// padding-top: var(--status-bar-height);
		width: 100%;
		// height: 50upx;
		background-color: #ffffff;
	}

	.top {
		height: 90upx;
		z-index: 10;
		display: flex;
		position: fixed;
		top: var(--status-bar-height);
		// top: 0;
		// padding-top: var(--status-bar-height);
		width: 100%;
		// height: 50upx;
		background-color: #ffffff;
		align-items: center;
		text-align: center;

		.title {
			width: 70%;
			font-size: 40upx;
			font-family: PingFang SC;
			font-weight: bold;
			// line-height: 82upx;
			color: #333333;
			opacity: 1;
		}
	}

	.sums {
		// height: 100vh;
		padding-top: 182upx;
		background-size: 100% 50%;
		background-repeat: no-repeat;
	}

	.tab {
		display: flex;
		text-align: center;
		width: 100%;
		align-items: center;

		// background-color: #5AC725;
		// background-color: white;
		view {
			width: 50%;
			padding: 20upx 0;
			position: relative;
			color: #FFFFFF;
			// transition: all 0.3s ease-in-out;
			// &:active {
			// 	background-color: #FFBE53;
			// }
		}

		.btn {
			width: 50%;
			padding: 20upx 0;
			position: relative;
			color: rgba(51, 51, 51, 1);
			transition: all 0.3s ease-in-out;

			&:active {
				background-color: #FC6758;
			}
		}

		.qie {
			color: rgba(51, 51, 51, 1);
			font-weight: 700;

			&:after {
				content: '';
				position: absolute;
				height: 10upx;
				border-radius: 15upx;
				width: 20%;
				background-color: #FC6758;
				bottom: 0;
				left: 50%;
				transform: translate(-50%);
				border-radius: 40upx;
			}
		}

	}

	.center {
		position: fixed;
		width: 100%;
		// margin-top: calc(var(--status-bar-height) );
		top: calc(var(--status-bar-height) + 90upx);
		background-color: #FFF;
		z-index: 1;
	}

	.mains {
		position: relative;
		padding-top: 60upx;
		// height: calc(100% - 23rpx - 10vh - 101rpx );
		overflow: hidden;
		// top: calc(var(--status-bar-height) *1);
	}
</style>
